<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow fixed alpha customBack>
			<view slot="back" class='customBack' @click="goBack">
				<image src="/static/fanhui.png" class="back" mode=""></image>
			</view>
			<view slot="right" class="">
				
			</view>
			<view class="" style="color: #fff;">

			</view>
		</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
			
			<image src="" class="title" mode=""></image>
			<button class="uptxbtn" open-type="chooseAvatar" @chooseavatar="chooseavatar">
				<view class="uptxbtn__tx">
					<image :src="URL(form.avatar)" class="uptx" mode="aspectFill"></image>
					<image src="/static/my/txup.png" class="uptxixon" mode=""></image>
				</view>
			</button>
			<form class="" @submit="formSubmit">
				<view class="item">
					<view class="item__label">
						昵称
					</view>
					<input class="item__inp" type="nickname" placeholder="昵称" name="username" v-model="form.username" />
				</view>
				<view class="item">
					<view class="item__label">
						姓名
					</view>
					<input class="item__inp" v-model="form.realname" placeholder="请输入真实姓名" />
				</view>
				<view class="item">
					<view class="item__label">
						手机号
					</view>
					<input class="item__inp" v-model="form.mobile" placeholder="请输入您的手机号" />
				</view>
				<view class="tn-flex tn-flex-row-center" style="padding: 50rpx 0;">
					<tn-button form-type="submit" fontColor="#FFFFFF" shape='round' width='604rpx' height='99rpx' :fontSize='36' backgroundColor="tn-bg-lv" shadow>保存</tn-button>
				</view>
				<!-- <button  :style="{top:vuex_custom_bar_height + 'px'}" class="right">保存</button> -->
			</form>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/api/config.js'
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				form:{
					username:'',
					realname:'',
					mobile:'',
					avatar:""
				},
				isok:false
			};
		},
		methods:{
			chooseavatar(e) {
				let _this = this
				uni.getImageInfo({
					src: e.detail.avatarUrl,
					success: function(sres) {
						//上传图片
						uni.uploadFile({
							url: BASE_URL + '/api/common/upload',
							filePath: sres.path,
							name: "file",
							header: {
								"token": _this.$store.state.vuex_token
							},
							success: function(res) {
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title:'上传成功',
										icon:"none"
									})
									_this.form.avatar = JSON.parse(res.data).data.url
								} else {
									uni.showToast({
										title:'上传失败',
										icon:"none"
									})
								}
							},
							error: function(rev) {
								console.log(rev);
							}
						});
					},
					fail: function(srev) {
						console.log(srev);
					}
				});
			},
			formSubmit(e) {
				let d = e.detail.value
				this.form.username = d.username
				if(!this.form.avatar){
					uni.showToast({
						title:'请上传头像',
						icon:'none'
					})
					return
				}
				if (!d.username) {
					uni.showToast({
						title:'请输入昵称',
						icon:'none'
					})
					return
				}
				if (!this.form.realname) {
					uni.showToast({
						title:'请输入真实姓名',
						icon:'none'
					})
					return
				}
				// console.log(this.form)
				user.profile(this.form).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title:'保存成功',
							icon:'none'
						})
						user.userinex().then(r => {
							if (r.data.code == 1) {
								this.$tn.vuex('vuex_userinfo', res.data.data)
								this.isok=true
								uni.navigateBack()
							}
						})
					}
				})
			},
		},
		onLoad() {
			for (let key in this.form) {
				this.form[key]=this.$store.state.vuex_userinfo[key]
			}
		}
	}
</script>

<style lang="scss">
.right{
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 34rpx;
	color: #3F403F;
	line-height: 34rpx;
	background-color: transparent;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	justify-content: center;
}
.back{
	width: 19rpx;
	height: 32rpx;
	// margin-left: 30rpx;
}
.title{
	width: 310rpx;
	height: 124rpx;
	margin-top: 80rpx;
}
.con{
	padding: 0 48rpx;
	position: relative;
	.uptx{
		width: 176rpx;
		height: 176rpx;
		background: #000000;
		box-shadow: 0rpx 14rpx 30rpx 0rpx rgba(0,0,0,0.2);
		border-radius: 50%;
		border: 15rpx solid #FFFFFF;
	}
	.uptxbtn{
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		&__tx{
			width: 236rpx;
			height: 236rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.uptxixon{
			position: absolute;
			width: 52rpx;
			height: 52rpx;
			bottom: 38rpx;
			right:38rpx;
		}
	}
}
.item{
	&__label{
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 30rpx;
		color: #606060;
		line-height: 30rpx;
		margin-bottom: 12rpx;
		margin-top: 40rpx;
	}
	&__inp{
		width: 656rpx;
		height: 104rpx;
		border-radius: 30rpx;
		border: 2rpx solid #EFEFEF;
		text-align: center;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 30rpx;
		color: #202020;
		line-height: 36rpx;
	}
}
</style>